<template>
	<view class="choose_school">
		<view class="top_img">
			<image src="../../static/images/chooseSchool.png" mode=""></image>
		</view>
		<view class="banner">
			<image src="../../static/images/banner.png" mode=""></image>
		</view>
		<view class="choose_tab">
			<view class="choose_item" :class="{active:active == 1}" @tap="changeActive" :data-active="1">
				<image src="../../static/images/button.png" mode=""></image>
				<text>金山校区</text>
			</view>
			<view class="choose_item" :class="{active:active == 2}" @tap="changeActive" :data-active="2">
				<image src="../../static/images/button.png" mode=""></image>
				<text>旗山校区</text>
			</view>
		</view>
		<view class="choose_tips">
			<image src="../../static/images/icon_notice.png" mode=""></image>
			<text>点击校区按钮，切换校区服务入口</text>
		</view>
		<view class="address">
			<view class="address_item">
				<image src="../../static/images/icon_map.png" mode=""></image>
				<text>福建省福州市仓山区上下店路15号</text>
			</view>
			<view class="address_item">
				<image src="../../static/images/icon_map.png" mode=""></image>
				<text>福建省福州市仓山区上下店路15号</text>
			</view>
		</view>
		<view class="bottom_btn">
			<button class="cu-btn round block">进入金山校区</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active:1
			}
		},
		methods: {
			changeActive(e){
				this.active = e.currentTarget.dataset.active
			}
		}
	}
</script>

<style scoped>
.top_img{
	width: 100%;
	height: 394upx;
}
.top_img image{
	width: 100%;
	height: 100%;
}
.banner{
	margin: -100upx auto 0;
	width: 686upx;
}
.banner image{
	width: 686upx;
	height: 342upx;
}
.choose_tab{
	padding: 48upx 32upx 32upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.choose_item{
	position: relative;
	width: 307upx;
	height: 110upx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #FFF;
	border-radius: 8upx;
	box-shadow: 0px 2upx 7upx 2upx rgba(0,0,0,0.06); 
	font-weight: 500;
	font-size: 32upx;
	color: #7d807e;
}
.choose_item image{
	position: absolute;
	width: 307upx;
	height: 128upx;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
}
.choose_item text{
	position: relative;
	z-index: 1;
}
.choose_item.active{
	color: #FFF;
}
.choose_item.active image{
	opacity: 1;
}
.choose_tips{
	margin: 0 32upx;
	background: #f2f7f5;
	border-radius: 4upx;
	height: 78upx;
	display: flex;
	align-items: center;
	padding-left: 24upx;
	color: #999e9c;
}
.choose_tips image{
	width: 40upx;
	height: 40upx;
	margin-right: 12upx;
}
.address{
	margin: 48upx 32upx 0;
	border-radius: 4upx;
	overflow: hidden;
	box-shadow: 0px 2upx 7upx 2upx rgba(0,0,0,0.06); 
}
.address_item{
	height: 104upx;
	display: flex;
	align-items: center;
	padding: 0 24upx;
	position: relative;
}
.address_item image{
	width: 40upx;
	height: 40upx;
	margin-right: 16upx;
}
.address_item + .address_item::after{
	content: " ";
	position: absolute;
	height: 1upx;
	top: 0;
	left: 80upx;
	right: 32upx;
	background-color: #EBEBEB;
}
.bottom_btn{
	padding: 50upx 32upx;
}
.bottom_btn button{
	background: #1bc46a;
	height: 88upx;
	color: #FFF;
	font-size: 32upx;
}
</style>
